<script setup lang="ts">
import dayjs from 'dayjs'
import AddressParse from 'zh-address-parse'
import { useProjectConfigStore } from '@/store/projectConfig'
import { useUserInfoStore } from '@/store/userInfo'
import { removeUnit } from '@/utils/removeUnit'
import { editProjectAPI } from '@/apis/editProject'
import { createProjectAPI } from '@/apis/createProject'
import { uploadImageAPI } from '@/apis/uploadImage'

// Assets
import modalSuccessIcon from '@/static/images/modal/success.png'
import { fetchProjectDetailAPI } from '@/apis/fetchProjectDetail'

const router = useRouter()
const userInfoStore = useUserInfoStore()
const projectConfigStore = useProjectConfigStore()

// 如果是编辑已有数据，则将 id 放到这里，提交时带上
const oldDataId = ref<string | undefined>()

// 表单数据
const formData = ref({
  name: '', // 项目名称
  province: '', // 省
  city: '', // 市
  district: '', // 区
  address: '', // 详细地址
  longitude: '', // 经度
  latitude: '', // 纬度
  extent: '', // 面积
  project_type: null as ProjectType | null, // 装修类型
  duration: '', // 工期
  zx_style: '', // 装修风格
  house_type: null as HouseType | null, // 户型
  money_total: '', // 总价
  contract_images: [] as string[], // 合同
  ask: '', // 具体要求
  is_furniture: 1 as 1 | 0, // 是否带家具(2024.04.15新增)
  is_appliance: 1 as 1 | 0, // 是否带家电(2024.04.15新增)
  contacts_name: '', // 客户姓名
  contacts_mobile: '', // 客户手机号
  pay_images: [] as string[], // 打款照片
  pay_time: '', // 打款时间
  pay_money: '', // 打款金额
  pay_desc: '', // 打款说明
})

// 表单校验规则
const rules = {
  name: [
    { required: true, message: '项目名称不可为空', trigger: ['blur', 'change'] },
  ],
  province: [
    { required: true, message: '项目定位不可为空', trigger: ['blur', 'change'] },
  ],
  city: [
    { required: true, message: '项目定位不可为空', trigger: ['blur', 'change'] },
  ],
  district: [
    { required: true, message: '项目定位不可为空', trigger: ['blur', 'change'] },
  ],
  address: [
    { required: true, message: '详细地址不可为空', trigger: ['blur', 'change'] },
  ],
  longitude: [
    { required: true, message: '位置信息不可为空', trigger: ['blur', 'change'] },
  ],
  latitude: [
    { required: true, message: '位置信息不可为空', trigger: ['blur', 'change'] },
  ],
  extent: [
    { required: true, message: '装修面积不可为空', trigger: ['blur', 'change'] },
  ],
  zx_style: [
    { required: true, message: '装修风格不可为空', trigger: ['blur', 'change'] },
  ],
  project_type: [
    { type: 'object', required: true, message: '装修类型不可为空', trigger: ['blur', 'change'] },
  ],
  duration: [
    { required: true, message: '工期截止不可为空', trigger: ['blur', 'change'] },
  ],
  house_type: [
    { type: 'object', required: true, message: '户型不可为空', trigger: ['blur', 'change'] },
  ],
  money_total: [
    { required: true, message: '项目总价不可为空', trigger: ['blur', 'change'] },
  ],
  contract_images: [
    {
      required: true,
      transform(value: string[]) {
        return value.join(',')
      },
      message: '合同照片不可为空',
      trigger: ['blur', 'change'],
    },
  ],
  ask: [
    { required: true, message: '具体需求不可为空', trigger: ['blur', 'change'] },
  ],
  contacts_name: [
    { required: true, message: '客户姓名不可为空', trigger: ['blur', 'change'] },
  ],
  contacts_mobile: [
    { required: true, message: '客户手机号不可为空', trigger: ['blur', 'change'] },
    { pattern: /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/, message: '请输入正确的手机号', trigger: ['blur'] },
  ],
  pay_images: [
    {
      required: true,
      transform(value: string[]) {
        return value.join(',')
      },
      message: '打款照片不可为空',
      trigger: ['blur', 'change'],
    },
  ],
  pay_time: [
    { required: true, message: '打款时间不可为空', trigger: ['blur', 'change'] },
  ],
  pay_money: [
    { required: true, message: '打款金额不可为空', trigger: ['blur', 'change'] },
  ],
  pay_desc: [
    { required: true, message: '打款备注不可为空', trigger: ['blur', 'change'] },
  ],
}

// 表单组件 ref
const formRef = ref<any>(null)
// loading 状态
const loading = ref(false)
// 是否显示表单提交成功弹窗
const isShowSuccessModal = ref(false)

/* ------------------------------- 选择位置 START ------------------------------- */
// 选中的省市区字符串
const choosedLocationString = computed(() => {
  return `${formData.value.province}${formData.value.city}${formData.value.district}`
})

/**
 * @description 处理选择位置事件
 */
async function handleChooseLocation() {
  const choosedResult = await uni.chooseLocation()
  const parsedAddress = AddressParse(choosedResult.address)
  formData.value.longitude = `${choosedResult.longitude}`
  formData.value.latitude = `${choosedResult.latitude}`
  formData.value.province = parsedAddress.province
  formData.value.city = parsedAddress.city
  formData.value.district = parsedAddress.area
  formData.value.address = choosedResult.name
}
/* -------------------------------- 选择位置 END -------------------------------- */

/* ------------------------------ 选择装修类型 START ------------------------------ */
/**
 * @description 处理选择装修类型事件
 */
function handleSelectProjectType() {
  uni.showActionSheet({
    itemList: projectConfigStore.projectTypeList.map(type => type.name),
    success: (result) => {
      formData.value.project_type = projectConfigStore.projectTypeList[result.tapIndex]
    },
  })
}
/* ------------------------------- 选择装修类型 END ------------------------------- */

/* ------------------------------ 选择工期截止 START ------------------------------ */
// 日历组件 ref
const durationCalendarsRef = ref<any>(null)

const displayedDurationDate = computed(() => {
  if (formData.value.duration)
    return dayjs.unix(Number(formData.value.duration)).format('YYYY-MM-DD')
  else
    return ''
})

function handleSelectDuration() {
  durationCalendarsRef.value.open()
}

function handleChooseDurationDate(e: any) {
  formData.value.duration = dayjs(e.fulldate).unix().toString()
}
/* ------------------------------- 选择工期截止 END ------------------------------- */

/* ------------------------------- 选择户型 START ------------------------------- */
const selectedHouseTypeIndex = ref(0)

/**
 * @description 处理选择户型事件
 */
function handleSelectHouseType(e: any) {
  const index = Number(e.detail.value)
  selectedHouseTypeIndex.value = index
  formData.value.house_type = projectConfigStore.houseTypeList[index]
}
/* -------------------------------- 选择户型 END -------------------------------- */

/* ------------------------------ 选择合同照片 START ------------------------------ */
/**
 * @description 处理选择合同照片事件
 */
function handlePickContractImage() {
  uni.showActionSheet({
    itemList: ['拍摄', '从手机相册中选择'],
    success: (result) => {
      const sourceType = result.tapIndex === 0 ? 'camera' : 'album'
      uni.chooseMedia({
        count: 9,
        mediaType: ['image'],
        sourceType: [sourceType],
        sizeType: ['compressed'],
        success: (result) => {
          if (result.tempFiles.length > 0) {
            // 遍历照片临时路径的数组，将照片上传至服务器，将返回的 url 存入 formData
            result.tempFiles.forEach(async (path) => {
              const res = await uploadImageAPI(path.tempFilePath, userInfoStore.userInfo!.token!)
              if (res.data) {
                const resData = JSON.parse(res.data)
                if (resData.code === 1)
                  formData.value.contract_images.push(resData.data.fullurl)
                else
                  uni.showToast({ title: resData.msg, icon: 'none' })
              }
              else {
                uni.showToast({ title: '上传图片失败', icon: 'none' })
              }
            })
          }
          else {
            uni.showToast({ title: '没有获取到照片', icon: 'none' })
          }
        },
      })
    },
  })
}

/**
 * @description 处理删除合同照片事件
 *
 * @param picture - 要删除的照片
 */
function handleDeleteContractImage(picture: string) {
  formData.value.contract_images = formData.value.contract_images
    .filter(item => item !== picture)
}
/* ------------------------------- 选择合同照片 END ------------------------------- */

/* ------------------------------ 选择打款照片 START ------------------------------ */
/**
 * @description 处理选择打款照片事件
 */
function handlePickPaymentImage() {
  uni.showActionSheet({
    itemList: ['拍摄', '从手机相册中选择'],
    success: (result) => {
      const sourceType = result.tapIndex === 0 ? 'camera' : 'album'
      uni.chooseMedia({
        count: 9,
        mediaType: ['image'],
        sourceType: [sourceType],
        sizeType: ['compressed'],
        success: (result) => {
          if (result.tempFiles.length > 0) {
            // 遍历照片临时路径的数组，将照片上传至服务器，将返回的 url 存入 formData
            result.tempFiles.forEach(async (path) => {
              const res = await uploadImageAPI(path.tempFilePath, userInfoStore.userInfo!.token!)
              if (res.data) {
                const resData = JSON.parse(res.data)
                if (resData.code === 1)
                  formData.value.pay_images.push(resData.data.fullurl)
                else
                  uni.showToast({ title: resData.msg, icon: 'none' })
              }
              else {
                uni.showToast({ title: '上传图片失败', icon: 'none' })
              }
            })
          }
          else {
            uni.showToast({ title: '没有获取到照片', icon: 'none' })
          }
        },
      })
    },
  })
}

/**
 * @description 处理删除打款照片事件
 */
function handleDeletePaymentImage(picture: string) {
  formData.value.pay_images = formData.value.pay_images
    .filter(item => item !== picture)
}
/* ------------------------------- 选择打款照片 END ------------------------------- */

/* ------------------------------ 选择打款时间 START ------------------------------ */
// 日历组件 ref
const paymentTimeCalendarsRef = ref<any>(null)
// 时间选择器状态
const timePickerSelection = ref<number[]>([])

// 初始化时间选择器默认 state
onMounted(() => {
  const now = dayjs(Date.now())
  timePickerSelection.value[0] = now.hour()
  timePickerSelection.value[1] = now.minute()
})

// 临时选择的包含日期和时间的数组，[0] -> date，[1] -> time
const tempDateStringList = ref<string[]>([])

// 显示在 cell 中的 date
const displayedPaymentDate = computed(() => {
  if (tempDateStringList.value[0])
    return dayjs(tempDateStringList.value[0]).format('YYYY-MM-DD')
})

// 显示在 cell 中的 time
const displayedPaymentTime = computed(() => {
  return tempDateStringList.value[1]
})

/**
 * @description 处理日期选择器确定事件
 */
function handleChoosePaymentDate(e: any) {
  tempDateStringList.value[0] = e.fulldate
  updatePaymentTime()
}

/**
 * @description 处理时间选择器确定事件
 */
function handleChoosePaymentTime(e: any) {
  tempDateStringList.value[1] = e.detail.value
  updatePaymentTime()
}

/**
 * @description 将选择的时间同步到 formData
 */
function updatePaymentTime() {
  if (tempDateStringList.value.length === 2) {
    const dateInstance = dayjs(`${tempDateStringList.value[0]} ${tempDateStringList.value[1]}`, 'YYYY-MM-DD HH:mm')
    formData.value.pay_time = `${dateInstance.unix()}`
  }
}
/* ------------------------------- 选择打款时间 END ------------------------------- */

// 如果是编辑已有数据，在加载时将已有数据写入 formData，并初始化其它状态
onLoad(async (options) => {
  // 刷新数据
  projectConfigStore.fetchHouseTypeList()
  projectConfigStore.fetchCaseTypeList()
  projectConfigStore.fetchProjectTypeList()

  if (options && options.project_id && options.payment) {
    const res = await fetchProjectDetailAPI(options.project_id, userInfoStore.userInfo!.token!)
    if (res.data?.code === 1) {
      const project = res.data.data
      const payment = JSON.parse(options.payment) as Record<string, any>
      oldDataId.value = project.id?.toString()
      formData.value = {
        name: project.name || '',
        province: project.province || '',
        city: project.city || '',
        district: project.district || '',
        address: project.address || '',
        longitude: project.longitude || '',
        latitude: project.latitude || '',
        extent: removeUnit(`${project.extent}`, 'm²') || '',
        project_type: projectConfigStore.projectTypeList.find(el => el.id?.toString() === project.project_type_id?.toString()) || null,
        duration: removeUnit(`${project.duration}`, '天') || '',
        zx_style: project.zx_style || '',
        house_type: projectConfigStore.houseTypeList.find(el => el.id?.toString() === project.house_type?.toString()) || null,
        money_total: project.money_total || '',
        contract_images: project.contract_images?.split(',') || [],
        ask: project.ask || '',
        is_furniture: project.is_furniture || 1,
        is_appliance: project.is_appliance || 1,
        contacts_name: project.contacts_name || '',
        contacts_mobile: project.contacts_mobile || '',
        pay_images: payment.payImages as any || [],
        pay_time: `${dayjs(payment.payTime).unix()}` || '',
        pay_money: payment.payMoney || '',
        pay_desc: payment.payDesc || '',
      }
      tempDateStringList.value = [dayjs(payment.pay_time).format('YYYY-MM-DD'), dayjs(payment.pay_time).format('HH:mm')]
      timePickerSelection.value = [dayjs(payment.pay_time).hour(), dayjs(payment.pay_time).minute()]
    }
    else {
      uni.showToast({ title: res.data?.msg, icon: 'none' })
    }
  }
})

onReady(() => {
  if (oldDataId.value)
    uni.setNavigationBarTitle({ title: '重新提交' })
  else
    uni.setNavigationBarTitle({ title: '项目录入' })
})

/**
 * @description 处理提交表单事件
 */
const handleSubmit = useThrottleFn(() => {
  // 确保 token 存在
  if (userInfoStore.userInfo && userInfoStore.userInfo.token) {
    // 校验表单
    formRef.value.validate()
      .then(async () => {
        // 表单校验通过

        // 控制加载状态
        loading.value = true
        // 补个单位
        formData.value.extent = `${formData.value.extent}m²`
        formData.value.duration = `${formData.value.duration}天`

        // 提交表单
        try {
          let res
          if (oldDataId.value) {
            res = await editProjectAPI({
              ...formData.value,
              contract_images: formData.value.contract_images.join(','),
              pay_images: formData.value.pay_images.join(','),
              project_type_id: formData.value.project_type?.id || '',
              house_type: formData.value.house_type?.id || '',
              id: oldDataId.value,
            }, userInfoStore.userInfo!.token!)
          }
          else {
            res = await createProjectAPI({
              ...formData.value,
              contract_images: formData.value.contract_images.join(','),
              pay_images: formData.value.pay_images.join(','),
              project_type_id: formData.value.project_type?.id || '',
              house_type: formData.value.house_type?.id || '',
            }, userInfoStore.userInfo!.token!)
          }
          loading.value = false
          if (res.data?.code === 1)
            // 提交成功
            isShowSuccessModal.value = true
          else
            // 服务器返回错误
            uni.showToast({ title: res.data?.msg, icon: 'none' })
        }
        catch (error) {
          // 请求发生错误
          loading.value = false
          uni.showToast({ title: '上传失败，请重试', icon: 'none' })
        }
      })
      .catch((errors: AnyObject[]) => {
        // 表单验证失败
        if (errors.length > 0)
          uni.showToast({ title: errors[0].message, icon: 'none' })
      })
  }
  else {
    uni.showToast({ title: '录入失败，请重新打开页面', icon: 'none' })
  }
}, 1000)

/**
 * @description 处理提交成功后退出页面的事件，清空表单数据并跳转到审核管理界面
 */
function handleExit() {
  if (oldDataId.value) {
    router.back()
  }
  else {
    router.replace('review')
    resetFormData()
  }
}

/**
 * @description 清空表单数据
 */
function resetFormData() {
  formData.value = {
    name: '',
    province: '',
    city: '',
    district: '',
    address: '',
    longitude: '',
    latitude: '',
    extent: '',
    project_type: null,
    duration: '',
    zx_style: '',
    house_type: null,
    money_total: '',
    contract_images: [],
    ask: '',
    is_furniture: 1,
    is_appliance: 1,
    contacts_name: '',
    contacts_mobile: '',
    pay_images: [],
    pay_time: '',
    pay_money: '',
    pay_desc: '',
  }
  tempDateStringList.value = []
  timePickerSelection.value = []
}
</script>

<template>
  <view class="min-h-screen bg-#F8F8F8">
    <uv-form ref="formRef" :model="formData" :rules="rules">
      <view class="flex items-center pt-30rpx pr-30rpx pb-24rpx pl-30rpx">
        <image class="w-36rpx h-32rpx" src="@/static/images/folder.png" />
        <Spacer width="13" />
        <view class="text-30rpx leading-30rpx font-bold text-secondary">
          项目信息
        </view>
      </view>
      <view class="mx-30rpx bg-white rounded-10rpx">
        <uv-form-item prop="name" :custom-style="{ padding: 0 }">
          <ListCell label="项目名称">
            <ListInput v-model="formData.name" placeholder="请输入项目名称" />
          </ListCell>
        </uv-form-item>
        <Divider />
        <uv-form-item prop="province" :custom-style="{ padding: 0 }">
          <ListCell label="项目定位" @tap="handleChooseLocation">
            <ListLink :value="choosedLocationString" placeholder="请选择项目位置" />
          </ListCell>
        </uv-form-item>
        <Divider />
        <uv-form-item prop="address" :custom-style="{ padding: 0 }">
          <ListCell label="详细位置">
            <ListInput v-model="formData.address" placeholder="请输入项目详细位置" />
          </ListCell>
        </uv-form-item>
        <Divider />
        <uv-form-item prop="extent" :custom-style="{ padding: 0 }">
          <ListCell label="装修面积">
            <ListInput v-model="formData.extent" type="number" placeholder="请输入面积（m²）" />
          </ListCell>
        </uv-form-item>
        <Divider />
        <uv-form-item prop="zx_style" :custom-style="{ padding: 0 }">
          <ListCell label="装修风格">
            <ListInput v-model="formData.zx_style" placeholder="请输入装修风格" />
          </ListCell>
        </uv-form-item>
        <Divider />
        <uv-form-item prop="project_type" :custom-style="{ padding: 0 }">
          <ListCell label="装修类型" @tap="handleSelectProjectType">
            <ListLink :value="formData.project_type?.name" placeholder="请选择装修类型" />
          </ListCell>
        </uv-form-item>
        <Divider />
        <uv-form-item prop="duration" :custom-style="{ padding: 0 }">
          <ListCell label="工期截止" @tap="handleSelectDuration">
            <ListLink :value="displayedDurationDate" placeholder="请选择工期截止时间" />
          </ListCell>
        </uv-form-item>
        <Divider />
        <uv-form-item prop="house_type" :custom-style="{ padding: 0 }">
          <picker
            mode="selector"
            :value="selectedHouseTypeIndex"
            :range="projectConfigStore.houseTypeList.map(item => item.name)"
            @change="handleSelectHouseType"
          >
            <ListCell label="户型">
              <ListLink :value="formData.house_type?.name" placeholder="请选择户型" />
            </ListCell>
          </picker>
        </uv-form-item>
        <Divider />
        <uv-form-item prop="money_total" :custom-style="{ padding: 0 }">
          <ListCell label="项目总价">
            <ListInput v-model="formData.money_total" type="number" placeholder="请输入项目总价" />
          </ListCell>
        </uv-form-item>
        <Divider />
        <uv-form-item prop="contract_images" :custom-style="{ padding: 0 }">
          <ListCell direction="column" label="项目合同照片">
            <PictureGrid
              :pictures="formData.contract_images" mode="edit" :width="630"
              :cols="4" @pick-image="handlePickContractImage" @delete="handleDeleteContractImage"
            />
          </ListCell>
        </uv-form-item>
        <Divider />
        <uv-form-item prop="ask" :custom-style="{ padding: 0 }">
          <ListCell direction="column" label="具体要求">
            <textarea
              v-model="formData.ask"
              class="box-border w-full min-h-200rpx p-30rpx text-28rpx text-#333333 bg-#F0F0F0 rounded-10rpx"
              placeholder-style="color: #999999"
              :maxlength="-1"
              placeholder="请输入具体要求"
            />
          </ListCell>
        </uv-form-item>
        <Divider />
        <uv-form-item prop="isWithFurniture" :custom-style="{ padding: 0 }">
          <ListCell label="是否带家具">
            <view class="flex items-center h-116rpx text-#333333 text-28rpx leading-28rpx font-medium">
              <view class="flex items-center" @tap="formData.is_furniture = 1">
                <Checkbox :checked="Boolean(formData.is_furniture)" />
                <Spacer width="12" />
                <view>是</view>
              </view>
              <Spacer width="56" />
              <view class="flex items-center" @tap="formData.is_furniture = 0">
                <Checkbox :checked="!Boolean(formData.is_furniture)" />
                <Spacer width="12" />
                <view>否</view>
              </view>
            </view>
          </ListCell>
        </uv-form-item>
        <Divider />
        <uv-form-item prop="isWithAppliance" :custom-style="{ padding: 0 }">
          <ListCell label="是否带家电">
            <view class="flex items-center h-116rpx text-#333333 text-28rpx leading-28rpx font-medium">
              <view class="flex items-center" @tap="formData.is_appliance = 1">
                <Checkbox :checked="Boolean(formData.is_appliance)" />
                <Spacer width="12" />
                <view>是</view>
              </view>
              <Spacer width="56" />
              <view class="flex items-center" @tap="formData.is_appliance = 0">
                <Checkbox :checked="!Boolean(formData.is_appliance)" />
                <Spacer width="12" />
                <view>否</view>
              </view>
            </view>
          </ListCell>
        </uv-form-item>
      </view>
      <view class="flex items-center pt-30rpx pr-30rpx pb-24rpx pl-30rpx">
        <image class="w-32rpx h-32rpx" src="@/static/images/person.png" />
        <Spacer width="13" />
        <view class="text-30rpx leading-30rpx font-bold text-secondary">
          客户信息
        </view>
      </view>
      <view class="mx-30rpx bg-white rounded-10rpx">
        <uv-form-item prop="contacts_name" :custom-style="{ padding: 0 }">
          <ListCell label="客户姓名">
            <ListInput v-model="formData.contacts_name" placeholder="请输入客户姓名" />
          </ListCell>
        </uv-form-item>
        <Divider />
        <uv-form-item prop="contacts_mobile" :custom-style="{ padding: 0 }">
          <ListCell label="客户手机号">
            <ListInput
              v-model="formData.contacts_mobile"
              type="number"
              placeholder="请输入客户手机号"
            />
          </ListCell>
        </uv-form-item>
        <Divider />
        <uv-form-item prop="pay_images" :custom-style="{ padding: 0 }">
          <ListCell direction="column" label="打款信息">
            <PictureGrid
              :pictures="formData.pay_images" mode="edit" :width="630"
              :cols="4" @pick-image="handlePickPaymentImage" @delete="handleDeletePaymentImage"
            />
          </ListCell>
        </uv-form-item>
        <Divider />
        <uv-form-item prop="pay_time" :custom-style="{ padding: 0 }">
          <ListCell label="打款日期" @tap="paymentTimeCalendarsRef.open()">
            <ListLink :value="displayedPaymentDate" placeholder="请选择打款日期" />
          </ListCell>
        </uv-form-item>
        <Divider />
        <uv-form-item prop="pay_time" :custom-style="{ padding: 0 }">
          <picker :value="timePickerSelection" mode="time" @change="handleChoosePaymentTime">
            <ListCell label="打款时间">
              <ListLink :value="displayedPaymentTime" placeholder="请选择打款时间" />
            </ListCell>
          </picker>
        </uv-form-item>
        <Divider />
        <uv-form-item prop="pay_money" :custom-style="{ padding: 0 }">
          <ListCell label="打款金额">
            <ListInput v-model="formData.pay_money" type="number" placeholder="请输入打款金额" />
          </ListCell>
        </uv-form-item>
        <Divider />
        <uv-form-item prop="pay_desc" :custom-style="{ padding: 0 }">
          <ListCell direction="column" label="打款备注">
            <textarea
              v-model="formData.pay_desc"
              class="box-border w-full min-h-200rpx p-30rpx text-28rpx text-#333333 bg-#F0F0F0 rounded-10rpx"
              placeholder-style="color: #999999"
              :maxlength="-1"
              placeholder="请输入打款备注"
            />
          </ListCell>
        </uv-form-item>
      </view>
      <Spacer height="138" />
      <RGButton
        class="z-10 fixed bottom-80rpx x-center"
        @tap="handleSubmit"
      >
        提交审核
      </RGButton>
      <Spacer height="100" />
    </uv-form>
    <uv-calendars
      ref="paymentTimeCalendarsRef" :insert="false" round="20rpx" confirm-color="#FF6D0A"
      @confirm="handleChoosePaymentDate"
    />
    <uv-calendars
      ref="durationCalendarsRef" :insert="false" round="20rpx" confirm-color="#FF6D0A"
      @confirm="handleChooseDurationDate"
    />
    <uv-overlay :show="isShowSuccessModal" @tap="handleExit">
      <uv-transition mode="zoom-in" :show="isShowSuccessModal">
        <view class="relative w-screen h-screen">
          <JZTModal
            v-if="!oldDataId"
            :icon="modalSuccessIcon"
            title="项目提交成功"
            content="您的项目录入申请已经提交成功，请耐心等待审核"
            button-label="去查看"
            @confirm="handleExit"
          />
          <JZTModal
            v-else
            :icon="modalSuccessIcon"
            title="重新提交成功"
            content="您的项目录入申请已经重新提交成功，请耐心等待审核"
            button-label="去查看"
            @confirm="handleExit"
          />
        </view>
      </uv-transition>
    </uv-overlay>
  </view>
</template>

<route lang="yaml">
name: 'createProject'
style:
  navigationBarTitleText: '项目录入'
layout: 'custom'
</route>
